<template>
    <div class="logincontainer">
        <el-form class="loginForm" :model="loginModel" ref="loginFormRef" :inline="false" :rules="rules" size="medium">
            <el-form-item>
                <div class="loginTitle">智慧鱼缸项目</div>
            </el-form-item>
            <el-form-item prop="username">
                <el-input placeholder="请输入账户" v-model="loginModel.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="请输入密码" v-model="loginModel.password"></el-input>
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-form-item prop="code">
                        <el-input placeholder="请输入验证码" v-model="loginModel.code"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item v-if="imgStatus">
                        <el-button type="info" plain @click="changeImg">获取验证码</el-button>
                    </el-form-item>
                    <el-form-item v-else="imgStatus">
                        <img class="image" @click="changeImg" :src="imgSrc" alt="">
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-row :gutter="20" style="margin-top: 10px;width: 100%;">
                    <el-col :span="12">
                        <el-button class="mybtnLeft" @click="login" type="primary" size="large">登录</el-button>
                    </el-col>
                    <el-col :span="12">
                        <el-button class="mybtnRight" @click="toRegister" size="large">注册</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ApiGetimgSrc } from '@/apis/user'
import { useLogin, useToRegister } from '@/composables/login/useLogin'
import useBaseLogin from '@/composables/login/useBaseLogin'

const { loginModel, rules, loginFormRef } = useBaseLogin();
const { imgSrc, changeImg, imgStatus } = ApiGetimgSrc(loginModel)
const { login } = useLogin(loginModel)
const { toRegister } = useToRegister()
</script>

<style scoped lang="scss">
.logincontainer {
    background-image: url('@/assets/bac.jpg');
    background-size: 100% 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .loginForm {
        position: relative;
        height: 260px;
        width: 350px;
        border-radius: 10px;
        padding: 20px 35px;
        box-shadow: 0 0 25px #cac6c6;
        background-color: white;

        .image {
            width: 100%;
            height: 30px;
            cursor: pointer;
        }

        .loginTitle {
            width: 100%;
            font-size: 24px;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mybtnLeft {
            width: 100%;
        }

        .mybtnRight {
            width: 100%;
            margin-left: 10%;
        }
    }
}
</style>